<template>
	<view class="container" style="background: #000;">
		<view class="wrap">
			<view class="wrap_header">
				<view class="header">
					<text class="title">健康咨询</text>
					<view class="action-item search-input" @click="openMenu">
						<u-icon name="list" color="#000" size="40"></u-icon>
					</view>
				</view>

				<view class="search-bar">
					<input type="text" placeholder="你要了解什么" v-model="searchQuery" />
					<view class="action-item">
						<u-icon name="search" color="#666" size="24" @click="search"></u-icon>
					</view>
				</view>


				<view class="status-buttons">
					<button :class="{ active: currentStatus === 'all' }" @click="filterQuestions('all')">所有</button>
					<button :class="{ active: currentStatus === '0' }" @click="filterQuestions('0')">未回答</button>
					<button :class="{ active: currentStatus === '1' }" @click="filterQuestions('1')">已回答</button>
					<button :class="{ active: currentStatus === '2' }" @click="filterQuestions('2')">已解决</button>
					<button :class="{ active: currentStatus === '3' }" @click="filterQuestions('3')">已关闭</button>
				</view>
			</view>

			<view class="question-list">
				<view class="question-item" v-for="question in filteredQuestions" :key="question.id">
					<!-- <view class="question-item" v-for="(question,index) in filteredQuestions" :key="index"> -->
					<view class="status-and-user">
						<view :class="['status', statusClass[question.statusAsk]]">
							{{ statusText[question.statusAsk] || '状态未知' }}
						</view>
						<view class="user-info">
							<image class="avatar" :src="question.avatar || defaultAvatar" />
							<text class="user-name">{{ question.nickName || '匿名' }}</text>
							<text class="ask-time">{{ getTimeDifference(question.createTime) }}</text>
						</view>
					</view>
					<view class="title" @click="handleAskClick(question.id)">{{ question.title }}</view>
					<view class="tags" v-if="question.tags">
						<view class="tag" v-for="tag in question.tags.split(',')" :key="tag.trim()"
							@click="handleTagClick(tag.trim())">
							#{{ tag.trim() }}
						</view>
					</view>
				</view>
			</view>
			<!-- <u-loadmore :status="status" /> -->
			<u-loadmore v-if="hasMore" :bottom="200" :loading="loadingMore" @loadmore="loadMore" />
			<view v-if="!hasMore && !loadingMore" class="no-more">没有更多了</view>
			<view v-if="loadingMore" class="loading">加载中...</view>
		</view>
		
		<Footer :type="currentType" :id="currentId" />

		<!-- 	<view class="footer">
			<view class="tabbar">
				<view class="action-item" @click="backHome">
					<u-icon name="home-fill" color="#666" size="22"></u-icon>
					<text class="text">首页</text>
				</view>
				<view class="action-item" @click="backMine">
					<u-icon name="account-fill" color="#666" size="24"></u-icon>
					<text class="text">咨询</text>
				</view>
				<view class="action-item floating-button" @click="openConsultationModal">
					<text class="text">+</text>
				</view>
				<view class="action-item" @click="backMine">
					<u-icon name="account-fill" color="#666" size="24"></u-icon>
					<text class="text">咨询</text>
				</view>
				<view class="action-item" @click="backMine">
					<u-icon name="account-fill" color="#666" size="24"></u-icon>
					<text class="text">我的</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Footer from '@/components/wrap/footer.vue';
	import {
		listAsk
	} from '@/api/system/ask'; // 更新为正确的导入路径

	export default {
		 components: {
		    Footer // 确保组件注册在此处
		  },
		data() {
			return {
				 currentType: 'ask', // 你可以根据实际情况设置
				 currentId: 123,    // 你可以根据实际情况设置
				currentStatus: 'all',
				pageNum: 1,
				pageSize: 6,
				questions: [],
				defaultAvatar: '/static/images/profile.png', // 设置默认头像 URL
				statusClass: {
					0: 'status-unanswered',
					1: 'status-answered',
					2: 'status-resolved',
					3: 'status-closed'
				},
				statusText: {
					0: '未回答',
					1: '已回答',
					2: '已解决',
					3: '已关闭'
				},
				loadMoreStatus: 'more', // 'more', 'loading', 'noMore'
				searchQuery: '',
				total: 0,
				loading: false
			};
		},
		computed: {
			filteredQuestions() {
				let filtered = this.questions;
				if (this.currentStatus !== 'all') {
					filtered = filtered.filter(question => question.statusAsk.toString() === this.currentStatus);
				}
				if (this.searchQuery) {
					//filtered = filtered.filter(question => question.title.includes(this.searchQuery));
				}
				return filtered;
			},
			hasMore() {
				return this.loadMoreStatus === 'more';
			},
			loadingMore() {
				return this.loadMoreStatus === 'loading';
			}
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize >= this.total) {
				this.loadMoreStatus = 'noMore';
				return;
			} else {
				this.loadMoreStatus = 'loading';
			}
			if (this.loading) return;

			this.pageNum += 1;
			this.loadQuestions(this.pageNum);
		},
		onPullDownRefresh() {
			this.pageNum = 1;
			this.total = 0;
			this.loading = false;
			this.questions = [];
			this.loadQuestions(() => uni.stopPullDownRefresh());
		},
		methods: {
			async search() {
				if (this.searchQuery.trim()) {
					this.pageNum = 1; // 重置页码
					this.total = 0; // 重置总数
					this.questions = []; // 清空当前问题列表
					console.log("开始搜索");
					await this.loadQuestions(); // 加载新的问题
				} else {
					// 如果搜索框为空，按当前筛选条件重新加载问题
					this.filterQuestions(this.currentStatus);
				}
			},
			async filterQuestions(status) {
				this.currentStatus = status;
				this.pageNum = 1;
				await this.loadQuestions(this.pageNum);
			},
			async loadQuestions(page) {
				console.log("开始请求加载问题数据");
				const num = this.pageSize;
				try {
					const response = await listAsk({
						pageNum: page,
						pageSize: num,
						keyword: this.searchQuery.trim() || undefined, // 传递搜索关键词
						statusAsk: this.currentStatus === 'all' ? undefined : this.currentStatus
					});
					if (page === 1) {
						this.questions = response.rows; // 刷新时重置数据
					} else {
						this.questions = this.questions.concat(response.rows); // 追加数据
					}
					this.total = response.total;
					if (response.rows.length < num) {
						this.loadMoreStatus = 'noMore'; // 无更多数据
					} else {
						this.loadMoreStatus = 'more'; // 继续加载
					}
				} catch (error) {
					console.error('获取数据失败', error);
					this.loadMoreStatus = 'more';
				}
			},
			async loadMore() {
				if (this.loadMoreStatus === 'more') {
					this.pageNum += 1;
					this.loadMoreStatus = 'loading';
					await this.loadQuestions(this.pageNum);
				}
			},
			openMenu() {
				uni.showToast({
					title: '菜单设计中',
					icon: 'none'
				});
			},
			openConsultationModal() {
				uni.navigateTo({
					url: '/pages/ask/ask'
				});
			},
			// backHome() {
			// 	uni.switchTab({
			// 		url: '/pages/index'
			// 	});
			// },
			// backMine() {
			// 	uni.switchTab({
			// 		url: '/pages/mine/index'
			// 	});
			// },
			search() {
				this.filterQuestions(this.currentStatus);
			},
			handleTagClick(tag) {
				uni.showToast({
					title: `点击了标签: ${tag}`,
					icon: 'none'
				});
				this.searchQuery = tag; // 将标签内容赋值给搜索框
				this.search(); // 调用搜索功能
			},
			handleAskClick(id) {
				uni.showToast({
					title: `跳转到问题详情: ${id}`,
					icon: 'none'
				});
				const url = "/pages/answer/list?ask_id=" + id
				uni.navigateTo({
					url: url
				});
			},
			getTimeDifference(createTime) {
				const now = new Date();
				const createdAt = new Date(createTime);
				const diffInSeconds = Math.floor((now - createdAt) / 1000);
				const diffInMinutes = Math.floor(diffInSeconds / 60);
				const diffInHours = Math.floor(diffInMinutes / 60);
				const diffInDays = Math.floor(diffInHours / 24);
				const diffInWeeks = Math.floor(diffInDays / 7);
				const diffInYears = Math.floor(diffInDays / 365);

				if (diffInYears > 0) {
					return `${diffInYears}年以前`;
				} else if (diffInWeeks > 0) {
					return `${diffInWeeks}周以前`;
				} else if (diffInDays > 0) {
					return `${diffInDays}天以前`;
				} else if (diffInHours > 0) {
					return `${diffInHours}小时以前`;
				} else {
					return `${diffInMinutes}分钟以前`;
				}
			}
		},
		mounted() {
			this.loadQuestions(1); // 初始加载第一页数据
		}
	};
</script>




<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		/* height: 120vh; */
		/* 确保容器占满视口高度 */
		background-color: #fff;
		overflow-y: auto;
		/* 允许滚动 */
	}

	.wrap_header {
		position: fixed;
		top: 0;
		width: 96%;
		z-index: 9;
	}

	.no-more {
		width: 100%;
		text-align: center;
		font-size: 24px;
		padding: 20px;
		padding-bottom: 100px;
	}

	.question-list {
		flex: 1;
		/* 填充剩余空间 */
		padding: 20px;
		overflow-y: auto;
		/* 允许滚动 */
		background: #fff;
		padding-bottom: 20px;
		padding-top: 218px;
	}

	.question-item {
		padding-bottom: 20px;
		border-bottom: 1px solid #dadada;
		cursor: pointer;
		margin-top: 20px;
	}


	.tags {
		display: flex;
		flex-wrap: wrap;
		/* 使标签在空间不足时换行 */
		margin-top: 10px;
	}

	.tag {
		margin-right: 10px;
		font-size: 14px;
		color: #666;
		cursor: pointer;
		white-space: nowrap;
		/* 确保标签文字不会换行 */
	}

	.tag:last-child {
		margin-right: 0;
		/* 去掉最后一个标签的右边距 */
	}

	.wrap {
		padding: 0 10px 0 10px;
		background-color: #fff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		color: #fff;
		height: 100px;

	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.header {
		background-color: #fff;

		.title {
			color: #000;
			font-size: 40rpx;
			text-align: center;
			width: 100%;
		}
	}

	.menu-button {
		background: transparent;
		border: none;
		cursor: pointer;
	}

	.menu-button image {
		width: 24px;
		height: 24px;
	}

	.menu {
		font-size: 34px;
		color: #000;
		font-weight: bold;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20px;
	}

	.search-bar input {
		flex: 1;
		border: none;
		background-color: #f3f3f3;
		padding: 0 20px 0 20px;
		height: 39px;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.search-bar .action-item {
		background-color: #f3f3f3;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8px 20px;
		height: 100%;
	}

	.search-bar button {
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.search-bar button image {
		width: 24px;
		height: 24px;
	}

	.search {
		color: #676767;
		font-size: 24px;
	}

	.no-border::after {
		border: none;
	}

	.status-buttons {
		display: flex;
		justify-content: space-around;
		padding: 00px 0;
		background-color: #fff;
		border-top: 0px solid #ccc;
		/* 添加顶部边框 */
		border-bottom: 0px solid #ccc;
		/* 添加底部边框 */
		position: sticky;
		top: 0;
		z-index: 1;
		border: none;
		margin: 0 00 10px 0;
	}

	.status-buttons button::after {
		border: none;
	}

	.status-buttons button {
		background-color: #fff;
		border: 1px solid #fff;
		/* 添加按钮边框 */
		border-radius: 0px;
		/* 圆角边框 */
		padding: 0px 0px;
		padding: 5px 10px 5px 10px;
		font-size: 16px;
		cursor: pointer;
		/* width: 80px; */
		height: 30px;
		line-height: 20px;
		text-align: center;
	}

	.status-buttons button.active {
		background-color: #ddd;
		color: #444;
		border-radius: 15px;
		padding-left: 10px;
		padding-right: 10px;
	}



	.question-item {
		padding-bottom: 20px;
		border-bottom: 1px solid #dadada;
		cursor: pointer;
		margin-top: 20px;
	}

	.status-and-user {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.status {
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 14px;
		/* color: #010101; */
		color: #666666;
		display: inline-block;
		margin-right: 10px;
	}

	.status-answered {
		background-color: #c2f7c2;
	}

	.status-unanswered {
		background-color: #febdc1;
	}

	.status-resolved {
		background-color: #c2e4f7;
	}

	.status-closed {
		background-color: #ccc;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-name {
		font-size: 16px;
		color: #333;
		/* color: #666; */
		margin-right: 10px;
	}

	.ask-time {
		font-size: 14px;
		color: #666;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000;
		margin-top: 10px;
	}

	.tags {
		display: flex;
		margin-top: 10px;
	}

	.tag {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}


</style>